<template>
	<view class="details">
		<view class="con">
			<scroll-view scroll-y="true" class="left">
				<view :class="index==selIndex?'item check':'item'" v-for="(item,index) in leftList" :key="index" @click="selItem(index, true)">
					<text>{{item.title}}</text>
				</view>
			</scroll-view>
			<view class="right">
				<view class="sortBox">
					<view class="sortItem" @click="selSort('')">
						<text>综合</text>
					</view>
					<view class="sortItem" @click="selSort('sale')">	
						<text>销量</text>
						<image :src="showSortIcon('sale')" mode=""></image>
					</view>
					<view class="sortItem" @click="selSort('price')">
						<text>价格</text>
						<image :src="showSortIcon('price')" mode=""></image>
					</view>
				</view>
				<scroll-view scroll-y="true" class="rightScroll" lower-threshold="200" @scrolltolower="getItem" @scroll="scrollFun">
					<view class="list_item" v-for="(item,index) in rightList.list" :key="index" @click="jump(selType == 'goods' ? 'product_view' : 'card_view', item.id)">
						<image :src="item.cover" mode=""></image>
						<view class="item_info">
							<view class="title" :style="selType == 'card' ? 'padding-top:14rpx' : ''">{{item.title}}</view>
							<view class="date" v-if="item.delivery_date != ''">{{item.delivery_date}}</view>
							<view class="sketch">{{item.sketch}}</view>
							<view class="price">
								{{'￥'+item.price}}
								<!-- <image src="../../static/img/cart.png" mode=""></image> -->
							</view>
						</view>
					</view>
					
					<view v-if="rightList.list.length == 0" class="nocontent">
						<image :src="obtainImgUrl('icon/noItem.png')"></image>
						<text>暂无信息～</text>
					</view>
				</scroll-view>
			</view>
		</view>
		<movable-view class="xf" direction="all"  @click="jump('cart')">
			<image src="../../static/img/cart.png" mode="scaleToFill"></image>
		</movable-view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				selIndex: 0,
				selLeftId: -1,
				selType: '',
                leftList:[],
				rightParam: {
					cate_id: 0,
					card_type: 0,
					price_sort: 0,
					sale_sort: 0,
					page: 1,
					pageSize: 100,
				},				
                rightList: {  
                	list: [],
                	isEmpty: false,
                	isEnd: false
                },
			}
		},
		methods: {
			getLeftList() {
				serve.request({
                    url: '/store/index/index',
                    data: {},
                }).then(res => {
                    this.leftList = res.data;
					let defaultKey = 0;
					if(this.selLeftId < 0) {
						for (let i = 0; i < this.leftList.length; i++) {
							if (this.leftList[i].id === this.selLeftId) {
								defaultKey = i;
							}
						}
					} 
                    this.selItem(defaultKey, false);
                });
			},
			showSortIcon(type) {
				let imgUrl = '';
				if(type == 'sale') {
					if(this.rightParam.sale_sort == 0) {
						imgUrl = serve.imgUrl()+'icon/sort.png';
					}
					if(this.rightParam.sale_sort == 1) {
						imgUrl = serve.imgUrl()+'icon/sort_down.png';
					}
					if(this.rightParam.sale_sort == 2) {
						imgUrl = serve.imgUrl()+'icon/sort_up.png';
					}
				}
				if(type == 'price') {
					if(this.rightParam.price_sort == 0) {
						imgUrl = serve.imgUrl()+'icon/sort.png';
					}
					if(this.rightParam.price_sort == 1) {
						imgUrl = serve.imgUrl()+'icon/sort_down.png';
					}
					if(this.rightParam.price_sort == 2) {
						imgUrl = serve.imgUrl()+'icon/sort_up.png';
					}
				}
				return imgUrl;
			},
			selSort(type) {
				if(type == '') {
					this.rightParam.sale_sort = 0;
					this.rightParam.price_sort = 0;
				}
				if(type == 'sale') {
					this.rightParam.sale_sort = this.rightParam.sale_sort == 1 ? 2 : 1;
				}
				if(type == 'price') {
					this.rightParam.price_sort = this.rightParam.price_sort == 1 ? 2 : 1;
				}
				this.selItem(this.selIndex, false);
			},
			selItem(key, scene) {
				if(scene && key == this.selIndex) {
					return ;
				}
				let nowItem = this.leftList[key];
				if(nowItem.length <= 0) {
					return;
				}
				
				this.selIndex = key;
				this.selType = nowItem.type;
				
				this.rightList.list = [];
				this.rightList.isEnd = false;
				
				this.rightParam.page = 1;
				this.rightParam.cate_id = 0;
				this.rightParam.card_type = 0;
				if(this.selType == 'goods') {
					this.rightParam.cate_id = nowItem.id;
				} else if (this.selType == 'card') {
					this.rightParam.card_type = nowItem.id;
				}
				this.getRightList();
                return ;
			},
			scrollFun(e) {
				console.info(e);
			},
			getItem() {
				this.rightParam.page ++;
				this.getRightList();
			},
			getRightUrl() {
				if (this.selType == 'card') {
					return "/store/index/card-list";
				}
				return "/store/index/goods-list";
			},
            getRightList() {
                if(this.rightList.isEnd) {
                    return ;
                }
                this.page++;
                uni.showLoading({
                    title: '加载中',
                    mask: true
                });
                serve.request({
                    url: this.getRightUrl(),
                    data: this.rightParam
                }).then(res => {
                    if (res.data && res.data.length > 0) {
                        this.rightList.list = this.rightList.list.concat(res.data);
                    } 
					this.rightList.isEnd = res.data.length < this.rightParam.pageSize ? true : false;
                });
            },
			obtainImgUrl(imgUrl) {
				return serve.imgUrl()+imgUrl;
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
			this.getLeftList();
		},
		onShow() {
			this.selLeftId = uni.getStorageSync('param_filter');
			if(this.selLeftId != '') {
				uni.setStorageSync('param_filter', "");
				this.getLeftList();
			}
		},
		onPullDownRefresh() {
			let nowIndex = JSON.parse(JSON.stringify(this.selIndex));
			this.selIndex = 0;
			this.selItem(nowIndex, false);
		}
	}
</script>

<style scoped lang="scss">
	.details{
		height: 97vh;
	    .con{
			display: flex;
			.left{
				height: 100%;
				width: 200rpx;
				.item {
					width: 100%;
					color: #666666;
					font-size: 24rpx;
					display: inline-block;
					vertical-align: middle;
					line-height: 80rpx;
					height: 80rpx;
					text-align: center;
					border-bottom: 1rpx #EBEBEB solid;
					border-collapse:collapse;
					position: relative;
					z-index: 0;
					text{
						position: relative;
						z-index: 5;
					}
					.sel {
						width: 78rpx;
						position: absolute;
						left: 50rpx;
						bottom:20rpx ;
						z-index: 2;
					}
				}
				.check{
					font-weight:bold ;
					color: #3333FF;
					background: #F7F7F7;    
                    font-size: 30rpx;
					text {
						    background: linear-gradient(to right, #e0c570, #e6c12b);
						    -webkit-background-clip: text;
						    -webkit-text-fill-color: transparent;
					}
				}
				
				
			}
		    
			.right{
				height: calc(100vh - 50rpx);
				width: calc(100vw - 200rpx);
				background: rgba(204,204,204,0.15);
				padding: 15rpx;
				.sortBox  {
					width: calc(100vw - 200rpx);
					height: 80rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.sortItem {
						position: relative;
						width: 30%;
						text-align: right;
						image {
							width: 40rpx;
							height: 40rpx;
							position: absolute;
							top: 4rpx;
						}
					}
				}
				.rightScroll {
					height: calc(100vh - 110rpx);
					.list_item {
						width: 96%;
						padding-bottom: 16rpx;
						display: flex;
						padding: 8rpx;
						border: 1rpx solid #ccc;
						margin-bottom: 8rpx;
						border-radius: 14rpx;
						image {
							width: 150rpx;
							height: 150rpx;
							border-radius: 2%;
						}
						.item_info {
							width: calc(100% - 160rpx);
							// height: 170rpx;
							padding-left: 10rpx;
							font-size: 28rpx;
							color: #333;
						}
						.title {
							height: 40rpx;
							overflow: hidden;
							text-overflow: -o-ellipsis-lastline;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
						.date {
							color: rgba(200, 0, 0, 1);
							overflow: hidden;
							text-overflow: -o-ellipsis-lastline;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
						.sketch {
							font-size: 26rpx;
							color: #aaa;
							overflow: hidden;
							text-overflow: -o-ellipsis-lastline;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
						.price{
							font-size:28rpx;
							color: #ffd900;
							position: relative;
							
							image {
								width: 50rpx;
								height: 50rpx;
								position: absolute;
								right: 20rpx;
								top: -10rpx;
							}
						}
					}
				}
			}
		}
        
		.nocontent {
			width: 100%;
			padding-top: 338rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 220rpx;
				height: 220rpx;
			}

			text {
				font-size: 28rpx;
				color: rgba(204, 204, 204, 1);
				margin-top: 30rpx;
			}
		}
	
		.xf{
			position: fixed;
			left: 85%;
			top: 70%;
			width:90upx;
			height:90upx;
			image{
				border: 8rpx solid #ffd900;
				padding: 10rpx;
				border-radius: 50rpx;
				width:70rpx;
				height:70rpx;
			}
			view{
		        font-size: 20rpx;
		        background: #ff5b5e;
		        color: #fff;
		        text-align: center;
		        margin-top: -8rpx;
		        border-radius: 10rpx;
			}
		}
	}
</style>